<template>
	<view class="payment_record">
		
		<view class="property_nav" v-if="pageType == 'property'">
			<text :class="['pro_item', currNav == 1? 'curr_pro_item':'']" @click="currNav = 1">账单记录</text>
			<text :class="['pro_item', currNav == 2? 'curr_pro_item':'']" @click="currNav = 2">缴费记录</text>
		</view>
		
		<view v-if="pageType == 'property' && currNav == 1" class="billing_records">
			
			<view class="billing_item">
				<view class="billing_time">
					<view class="pmt_fl" @click="choiceTime = true">
						<view>
							<u-picker 
								v-model="choiceTime" 
								mode="time" 
								:params="params"
								start-year="2020" 
								@confirm="confirmTime"
								></u-picker> 
							<view>{{dateTime}}</view>
						</view>  
						<image :class="['pmt_fl_img', choiceTime? 'mode_img':'']" :src="'https://community.chuangxiangdianli.com/images/propertyImg/shui_up.png'" mode=""></image>
					</view>
					<text class="pmt_fr">总缴费: {{propertylogList.total}}</text>
				</view>
				<view class="record_list">
					<u-empty  mode="list" :show="showBillingRecords"></u-empty> 
					<view class="record_item" v-for="i in propertylogList.log">   
							<text>{{i.create_time}}</text>    
							<text>{{i.day_cost}}元</text>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="payment_list" v-else>
			<view class="payment_item">
				<view class="payment_time" @click="clickTime(i)">
					<view class="pmt_fl" @click="choiceTime = true"> 
						<view>
							<u-picker 
								v-model="choiceTime" 
								mode="time" 
								:params="params"
								start-year="2020" 
								@confirm="confirmTime"
								></u-picker>
								<!-- 物业费 -->
							<!-- <view v-if="pageType == 'property'">{{year}}年</view> --> 
							<view>{{dateTime}}</view>
						</view> 
						<image :class="['pmt_fl_img', choiceTime? 'mode_img':'']" :src="'https://community.chuangxiangdianli.com/images/propertyImg/shui_up.png'" mode=""></image>
					</view>
					<text class="pmt_fr">总缴费: {{propertyBillList.total}}</text>
				</view>
				<scroll-view scroll-y class="record_list"> 
					<u-empty  mode="list" :show="showPropertyBillList"></u-empty>
					<view class="record_item" v-for="item in propertyBillList.list" @click="goToPaymentDetails(item.id)" :key="item.user_id">
						<image v-if="pageType == 'water'" class="record_item_fl" :src="'https://community.chuangxiangdianli.com/images/propertyImg/shudi.png'" mode=""></image>
						<image v-if="pageType == 'electric'" class="record_item_fl" :src="'https://community.chuangxiangdianli.com/images/propertyImg/dianfei@2x.png'" mode=""></image>
						<image v-if="pageType == 'property'" class="record_item_fl" :src="'https://community.chuangxiangdianli.com/images/propertyImg/wuye_2@2x.png'" mode=""></image>
						<view class="record_item_con">
							<text v-if="pageType == 'water'">水费缴纳</text>
							<text v-if="pageType == 'electric'">电费缴纳</text>
							<text v-if="pageType == 'property'">物业费缴纳</text>
							<text>给【{{item.name}}】缴费成功</text>
							<text>{{item.create_time}}</text>
						</view>
						<view class="record_item_fr">
							{{item.paymentMoney}}
						</view>
					</view>
				</scroll-view>
			</view>
		 
		</view>
	</view>
</template>

<script>
	import {getTime} from '@/utils/utils'
 	export default {
		onLoad(option) { 
			this.pageType = option.type 
			  console.log(this.pageType)
		},
		data() {
			return {
				pageType: null,
				currNav: 1,
				// 页面类型
				feeType: 1,
				// 每页条数
				limit: 10,
				// 当前页数
				page: 1, 
				// 当前年份
				year: '2021',
				// 时间
				dateTime: '2020.08',
				// 时间选择
				choiceTime: false,
				// 时间类型
				params: {
					year: true,
					month: true,
					day: false, 
				},
				// 物业费缴费记录列表
				propertyBillList:{},
				// 水电费缴费列表
				BillList: {},
				// 是否显示数据为空
				showPropertyBillList: false,
				// 账单记录是否为空
				showBillingRecords: false, 
				// 物业页面消费账单记录
				propertylogList:{}
			};
		},
		onShow() {  
			this.dateTime = getTime().split('.')[0] + '.' + getTime().split('.')[1]
		},
		methods:{
			clickTime(i){
				console.log(i)
			},
			// 物业费缴费明细
			// goToPayProDetails(){
			// 	uni.navigateTo({
			// 		url: '/property/payProDetails/index'
			// 	})
			// },
			// 前往缴费详情
			goToPaymentDetails(id){
				uni.navigateTo({
					url: '/property/paymentDetails/index?type=' + this.pageType + '&id=' + id
				})
			},
			// 获取水电费缴费记录
			payBillList(){
				let _this = this
				// let data = {
				// 	feeType: this.feeType,
				// 	limit: this.limit,
				// 	page: this.page,
				// 	date_time: null
				// };
				// // 物业费
				// if(_this.feeType == 3){
				// 	data.date_time = _this.year
				// }else{ // 水电费
				// 	data.date_time = _this.dateTime
				// } 
				_this.$mrequest2({
					url: 'Mini/bill/payBillList',
					method: 'POST',
					data:{
							feeType: _this.feeType,
							limit: _this.limit,
							page: _this.page,
							date_time: _this.dateTime
					}
				}).then(res => {
					if(res.code == 200){ 
						_this.propertyBillList = res.data 
						_this.showPropertyBillList = res.data.list.length == 0
					}
				})
			},  
			// 物业页面消费账单记录
			getPropertLog(){
				this.$mrequest2({
					url: 'Mini/bill/property_log',
					data:{
						year: this.dateTime
					}
				}).then(res => {
					if(res.code == 200){
						this.propertylogList = res.data
						this.showBillingRecords = res.data.log == 0 
					} 
				})
			},
			// 确认选择时间 type == 1 账单记录 type == 2 缴费记录
			confirmTime(time){   
				// 账单记录
				if(this.currNav == 1 && this.pageType == 'property'){
					this.dateTime = time.year + '.' + time.month
					// 获取账单记录
					this.getPropertLog()
				}else{
					if(time.month){
						this.dateTime = time.year + '.' + time.month 
					}else{
						this.year = time.year  
					}  
					// 获取缴费列表
					this.payBillList()
				}
 
			}
		},
		watch:{
			currNav(num){
				console.log(num)
				if(num == 2){
					this.payBillList()
				}else{
					this.getPropertLog()
				}
			},
			// 监听页面类型
			pageType(num){
				switch(num){
					case 'water':
					this.feeType = 1; 
					// this.params.month = 'true' 
					break;
					case 'electric':
					this.feeType = 2;
					// this.params.month = 'true' 
					break;
					case 'property':
					this.feeType = 3; 
					this.getPropertLog()
					break;
				} 
				this.payBillList()
			}
		}
	}
</script>

<style lang="scss">
.payment_record{ 
	.mode_img{
		transform: rotate(180deg); 
	}
	.property_nav{
		display: flex;
		height: 109rpx;
		line-height: 109rpx;
		.pro_item {
			flex: 1;
			text-align: center;
			margin: 0 100rpx;
		}
		.curr_pro_item{
			border-bottom: 4rpx solid #0076ff;
		}
	}
	
	
	.payment_list{ 
		background-color: #f7f8f9;
		.payment_item{
			.payment_time{
				padding: 0 39rpx;
				display: flex;
				justify-content: space-between;
				height: 101rpx;
				line-height: 101rpx;
				background-color: #f7f8f9;
				.pmt_fl{
					width: 260rpx;
					display: flex;
					.pmt_fl_img { 
						margin: auto 0 auto 20rpx;
						width: 19rpx;
						height: 19rpx;
					}
				}
			}
			.record_list{
				padding: 0 39rpx;
				width: calc(100vw - 70rpx);
				height: calc(100vh - 220rpx);
				background-color: #fff;
				.record_item{ 
					display: flex;
					padding: 35rpx 0; 
					.record_item_fl{
						margin-right: 24rpx;
						width: 38rpx;
						height: 50rpx;
					}
					.record_item_con{
						padding-bottom: 20rpx;
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between; 
						border-bottom: 2rpx solid #f7f8f9;
						text{
							font-size: 26rpx;
							color: #6b6b6b;
						}
						& text:nth-child(1){
							font-size: 28rpx;
							font-weight: 700;
							color: #333;
						}
					}
					.record_item_fr{
						width: 160rpx;
						font-size: 32rpx;
						color: #333;
						font-weight: 700;
						text-align: center;
					}
				}
			}
		} 
	}
	
	.billing_records{
		.billing_item{
			.billing_time{
				padding: 0 39rpx;
				display: flex;
				justify-content: space-between;
				height: 101rpx;
				line-height: 101rpx;
				background-color: #f7f8f9;
				.pmt_fl{
					width: 260rpx;
					display: flex;
					.pmt_fl_img { 
						margin: auto 0 auto 20rpx;
						width: 19rpx;
						height: 19rpx;
					}
				}
			}
			.record_list{
				.record_item{
					padding: 0 37rpx;
					display: flex;
					justify-content: space-between;
					height: 109rpx;
					line-height: 109rpx;
					border-bottom: 1rpx solid #f7f8f9;
				}
			}
		}
	}
}
</style>
